<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        padding: 0;
        margin: 0;
    }
/* 1 */
    #box{
        width: 300px;
        height: 300px;
        background-color: aquamarine;
    }
/* 3 */
    .hongse{
			color: red;
		}

        /* 4 */
        #si{
            width: 300px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        .xuanxiangka{
            width: 300px;
            height: 300px;
            
            text-align: center;
            border: 1px solid black;
        }

        .color{
            background-color: rgb(104, 104, 254);
        }
        
        /* 5 */
        .xiala{
            width: 250px;
            height: 25px;
            border: 1px solid black;
            display: flex;
            justify-content: space-between;
        }
        .limian{
            width: 250px;
            height: 100px;
            border: 1px solid black;
            display: flex;
            justify-content: space-between;
            flex-direction: column;
        }


        /* 6 */
        #liu{
            width: 300px;
            display: flex;
            flex-direction: column;
            
        }
        .he{
            width: 300px;
            height: 300px;
            border: 1px solid black;
            display: flex;
            flex-direction: column;           
            overflow: hidden;
        }
        
</style>
<script src="./vue.js"></script>
<body>
    <!-- 1 -->
     <div id="yi">
        <div id="box" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave">
            <img v-if="showContent" src="img/9385b8894f23dd197504b3560cf9f89.jpg" alt="" width="300px" height="300px">
        </div>
     </div>

     <!-- 2 -->
    <div id="er">

        <div v-show="a">
            <input type="text">
            <input type="text">
        </div>
        
         <button @click = "a=true">登录</button>
         <button @click = "a=false">X</button>
    </div>

    <!-- 3 -->
    <div id="san">
        <div><p>支付宝<button @click="activeIndex=0" :class="{'hongse':activeIndex===0}">√</button></p></div>        
	    <div><p>微信<button  @click="activeIndex=1" :class="{'hongse':activeIndex===1}">√</button></p></div>  
	    <div><p>银行卡<button @click="activeIndex=2" :class="{'hongse':activeIndex===2}">√</button></p></div>     
    </div>

    <!-- 4 -->
    <div id="si">
        <button @click="anniu=0" :class="{'color':anniu === 0}">按钮一</button>
        <button @click="anniu=1" :class="{'color':anniu === 1}">按钮二</button>
        <button @click="anniu=2" :class="{'color':anniu === 2}">按钮三</button>
        <button @click="anniu=3" :class="{'color':anniu === 3}">按钮四</button>
        <div class="xuanxiangka" v-if="anniu===0"><img src="img/9385b8894f23dd197504b3560cf9f89.jpg" alt="" width="300px" height="300px"></div>
        <div class="xuanxiangka" v-if="anniu===1"><img src="img/9385b8894f23dd197504b3560cf9f89.jpg" alt="" width="300px" height="300px"></div>
        <div class="xuanxiangka" v-if="anniu===2"><img src="img/9385b8894f23dd197504b3560cf9f89.jpg" alt="" width="300px" height="300px"></div>
        <div class="xuanxiangka" v-if="anniu===3"><img src="img/9385b8894f23dd197504b3560cf9f89.jpg" alt="" width="300px" height="300px"></div>
    </div>


    <!-- 5 -->
    <div id="wu">
        <div class="xiala" @click="zhan = !zhan">{{yang}}</div>
            <div v-show="zhan" v-for="(a,b) in xuan" @click="yang = a; zhan = false">{{a}}</div>
    </div>


    <!-- 6 -->
    <div id="liu">
        <input type="text" placeholder="输入的内容" v-model="he">
        <button @click="areYouSure">确定</button>
            <div class="he">
                <p v-for="(a,b) in hh">{{a.he}}
                    <button @click="shanChu(b)">删除</button>
                </p>
            </div>
    </div>


    <!-- 7 -->
    <div id="qi">
        <input :type="yincang?'text':'password'" >
        <input type="checkbox" @click="yincang=!yincang">
        <button>显示密码</button>
    </div>


    <!-- 8 -->
    <div id="ba">
        <textarea type="text" v-model="xianzi" maxlength="200"></textarea>
            <span>{{200-xianzi.length}}/200</span>
    </div>
      
    
</body>
<script>
    const { createApp, ref } = Vue;
// 1. 鼠标放上去显示 移开消失 
createApp({
        setup() {
            const showContent = ref(false);

            const onMouseEnter = () => {
                showContent.value = true;
            };

            const onMouseLeave = () => {
                showContent.value = false;
            };
            return {
                showContent,
                onMouseEnter,
                onMouseLeave
            };
        }
}).mount('#yi')

// 2. 点击登陆 弹出登录框点击X关闭登录框  
createApp({
    setup(){
        const a = ref(true);

        return{
            a
        }
    }
}).mount('#er')

// 3. 切换支付方式效果  
createApp({
    setup(){
			let red = ref('hongse')

			let activeIndex = ref()

        return{
			red,
			activeIndex
        }
    }
}).mount('#san')  

// 4. 选项卡 [参考效果](https://www.jq22.com/yanshi24114)
createApp({
        setup(){
            let anniu = ref(0)
            let color = ref('color')
            return{
                anniu,
                color
            }
        }
    }).mount('#si')

// 5. 模拟下拉框 [参考效果](https://www.jq22.com/webqd2375)
createApp({
        setup(){
            let xuan = ref(['选项一','选项二','选项三','选项四'])
            let zhan = ref(false)
            let yang = ref('选项一')
            return{
                xuan,
                zhan,
                yang
            }
        }
    }).mount('#wu')

// 6. 动态添加删除数据  [参考效果](https://www.jq22.com/webqd7039)
createApp({
        setup(){
            let he = ref("")
            let hh = ref([])
            function areYouSure() {
                hh.value.push({
                    he:he.value,
                })
                he.value = ''
            }
            function shanChu(c) {
                hh.value.splice(c,1)
            }
            return{
                he,
                areYouSure,
                hh,
                shanChu
            }
        }
    }).mount('#liu')

// 7. 一个密码输入框，带有一个按钮用于切换显示或隐藏密码文本。  参考 https://www.jq22.com/yanshi374
createApp({
        setup() {
            let yincang=ref(false)
            return {
                yincang
            }
        }
    }).mount('#qi')

// 8. 字数统计  https://www.jq22.com/yanshi3282
createApp({
        setup() {
            let xianzi=ref('')
            return {
            xianzi
            }
        }
    }).mount('#ba')


</script>
</html>